<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员流水</title>
    <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
</head>
<style>
    .container{
        width: 900px;
        height: 500px;
        margin-top: 100px;
    }
    .input-group{
        width: 300px;
        float: right;
    }
    #page{
        width: 300px;
        margin: 30px auto;
    }
</style>
<body>
<div class="container">
    <div class="head">
        <ol class="breadcrumb">
            <li><a href="#" style="font-size: 40px;color: rgb(10, 205, 10);">管理员</a></li>
            <li class="active" style="font-size: 20px;">流水信息</li>
        </ol>
    </div>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="输入id搜索" aria-describedby="basic-addon2" id="useridVal">
        <span class="input-group-addon" id="basic-addon2"><a id="search"><i class="bi bi-search"></i></a></span>
    </div>

    <div class="trans">
        <table class="table table-striped">
            <thead>
            <tr>
                <td>流水号</td>
                <td>时间</td>
                <td>金额</td>
                <td>用途</td>
                <td>用户id</td>
            </tr>
            </thead>
            <tbody id="content">

            </tbody>
        </table>
    </div>
    <nav aria-label="Page navigation" id="page" >
        <ul class="pagination">
            <li>
                <a aria-label="Previous" id="back">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a  class="switchPage" value="1">1</a></li>
            <li><a  class="switchPage" value="2">2</a></li>
            <li><a  class="switchPage" value="3">3</a></li>
            <li><a  class="switchPage" value="4">4</a></li>
            <li><a  class="switchPage" value="5">5</a></li>
            <li>
                <a href="#" aria-label="Next" id="go">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

</body>
<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
<script src="../bootstrap3/js/bootstrap.min.js"></script>
<script>
    $(document).ready(
        $.ajax({
            url:'/trans/getAllTrans/'+1+"/"+5,
            type:'get',
            success:function (data){
                let content1;
                for (let i = 0; i <data.length ; i++) {
                     content1=content1+"<tr><td>"+data[i].transid+"</td>"+
                        "<td>"+data[i].transTime+"</td>"+
                        "<td>"+data[i].transMoney+"</td>"+
                        "<td>"+data[i].transContent+"</td>"+
                        "<td>"+data[i].userid+"</td>"
                }
                $("#content").html(content1)
            }
        })
    )
    $("#search").click(function (){
        $.ajax({
            url:'/trans/getOne/'+$("#useridVal").val(),
            type:'get',
            success:function (data){
                let content=""
                console.log(data)
                if(data.length===0)
                {
                    $("#content").html(content)
                    alert("查询结果为空")
                }
                else {
                    for (let i = 0; i <data.length ; i++) {
                        content=content+"<tr><td>"+data[i].transid+"</td>"+
                            "<td>"+data[i].transTime+"</td>"+
                            "<td>"+data[i].transMoney+"</td>"+
                            "<td>"+data[i].transContent+"</td>"+
                            "<td>"+data[i].userid+"</td>"
                    }
                    $("#content").html(content)
                }
                $("#page").css("display","none");

            }
        })
    })
    $(".switchPage").click(function (){
        value= Number($(this).attr('value'))
        $.ajax({
            url:'/trans/getAllTrans/'+value+"/"+5,
            type:'get',
            success :function (data){
                let content
                for (let i = 0; i <data.length ; i++) {
                    content=content+"<tr><td>"+data[i].transid+"</td>"+
                        "<td>"+data[i].transTime+"</td>"+
                        "<td>"+data[i].transMoney+"</td>"+
                        "<td>"+data[i].transContent+"</td>"+
                        "<td>"+data[i].userid+"</td>"
                }
                $("#content").html(content)
            }
        })
    })
    $("#back").click(function (){
        $.ajax({
            url:'/trans/getAllTrans/'+(value-1)+"/"+5,
            type:'get',
            success :function (data){
                let content
                for (let i = 0; i <data.length ; i++) {
                    content=content+"<tr><td>"+data[i].transid+"</td>"+
                        "<td>"+data[i].transTime+"</td>"+
                        "<td>"+data[i].transMoney+"</td>"+
                        "<td>"+data[i].transContent+"</td>"+
                        "<td>"+data[i].userid+"</td>"
                }
                $("#content").html(content)
            }
        })
    })
    $("#go").click(function (){
        $.ajax({
            url:'/trans/getAllTrans/'+(value+1)+"/"+5,
            type:'get',
            success :function (data){
                let content
                for (let i = 0; i <data.length ; i++) {
                    content=content+"<tr><td>"+data[i].transid+"</td>"+
                        "<td>"+data[i].transTime+"</td>"+
                        "<td>"+data[i].transMoney+"</td>"+
                        "<td>"+data[i].transContent+"</td>"+
                        "<td>"+data[i].userid+"</td>"
                }
                $("#content").html(content)
            }
        })
    })
</script>
</html>
